<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                <button class="layui-btn layui-btn-normal" id="btn-top">增顶级菜单</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">增下级</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 定义新增时弹出窗口的模板 -->
<script type="text/html" id="menuTempLate">

    <form class="layui-form" action="/emp/save" lay-filter="menuForm">

        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">

                <input id="id" type="hidden"  name="id" >
                <input id="parentId" type="hidden"  name="parentId" >

                <input id="title" type="text" name="title" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-inline">
                    <input name="icon" type="text" id="iconPicker2" lay-filter="iconPicker2" value="layui-icon-face-smile-fine" style="display:none;">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单地址</label>
                <div class="layui-input-inline">
                    <input id="href" type="text" name="href"   class="layui-input demo-phone" placeholder="">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单打开方式</label>
                <div class="layui-input-inline">
                    <input id="target" type="text" name="target"  autocomplete="off" class="layui-input demo-phone">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input id="sequence" type="text" name="sequence"  autocomplete="off" class="layui-input demo-phone">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="saveBtn" type="button" class="layui-btn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script th:inline="none">
    layui.use(['table', 'treetable','layer','common','form','iconPicker'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var layer=layui.layer;
        var form=layui.form;
        var iconPicker = layui.iconPicker;


        // 渲染表格
        layer.load(2);

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        }).click();

        var tablerender=function (){
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'parentId',
                elem: '#munu-table',
                url: '/menu/list',
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'title', minWidth: 200, title: '菜单名称'},
                    {field: 'href', title: '菜单地址'},
                    {
                        field: 'icon',
                        title: '菜单图标'
                    },
                    {field: 'target', title: '打开方式'},
                    {field: 'sequence', width: 80, align: 'center', title: '排序号'},
                    {templet: '#auth-state', width: 180, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        tablerender();

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        //保存按钮绑定事件
        $("body").on("click","#saveBtn", function() {
            var data = form.val("menuForm");
            $.post("/menu/save", data, function() {
                tablerender();
                layer.closeAll();
            });
        });
        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
                layer.confirm("确认删除该菜单吗？",function () {
                    $.post("/menu/del?id="+data.id,function(m){
                        //重新渲染表格
                        tablerender();
                        //关闭窗口
                        layer.closeAll();
                        //错误提示
                        layer.msg(m.msg);
                    });
                })
            } else if (layEvent === 'edit') {
                $.get("/menu/"+data.id,function (m){
                    layer.open({
                        type:1,
                        area:['450px','450px'],
                        title:"编辑菜单",
                        content:$("#menuTempLate").html()
                    });
                    iconPicker.render({
                        // 选择器，推荐使用input
                        elem: '#iconPicker2',
                        // 数据类型：fontClass/unicode，推荐使用fontClass
                        type: 'fontClass',
                        // 是否开启搜索：true/false，默认true
                        search: true,
                        // 是否开启分页：true/false，默认true
                        page: true,
                        // 每页显示数量，默认12
                        limit: 12,
                        // 每个图标格子的宽度：'43px'或'20%'
                        cellWidth: '43px',
                        // 点击回调
                        click: function (data) {
                        },
                        // 渲染成功后的回调
                        success: function(d) {
                        }
                    });
                    iconPicker.checkIcon('iconPicker2', m.icon);
                    form.val("menuForm",m);
                });
            }else if (layEvent === "add") {
                layer.open({
                    type:1,
                    area:['450px','450px'],
                    title:"新增子菜单",
                    content:$("#menuTempLate").html()
                });

                iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker2',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false，默认true
                    search: true,
                    // 是否开启分页：true/false，默认true
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12,
                    // 每个图标格子的宽度：'43px'或'20%'
                    cellWidth: '43px',
                    // 点击回调
                    click: function (data) {
                    },
                    // 渲染成功后的回调
                    success: function(d) {
                    }
                });
                //默认选择图标
                iconPicker.checkIcon('iconPicker2', 'layui-icon-star-fill');

                //把当前行的id放到弹出窗口的父id里
                $("#parentId").val(data.id);

            }
        });

        //给增顶级菜单绑定事件
        $("#btn-top").on("click",function (){
            layer.open({
                type:1,
                area:['450px','450px'],
                title:"新增顶级菜单",
                content:$("#menuTempLate").html()
            });


            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#iconPicker2',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false，默认true
                search: true,
                // 是否开启分页：true/false，默认true
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 每个图标格子的宽度：'43px'或'20%'
                cellWidth: '43px',
                // 点击回调
                click: function (data) {
                },
                // 渲染成功后的回调
                success: function(d) {
                }
            });
            //默认选择图标
            iconPicker.checkIcon('iconPicker2', 'layui-icon-star-fill');
            //将父菜单id设置为0
            $("#parentId").val(0);
        });

    });
</script>
</body>
</html>